<template>
  <div class="article-collections">
    <van-sticky offset-top="46"><h4 class="title">收藏列表</h4></van-sticky>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
      ref="list"
    >
      <Article
        v-for="article in collections"
        :key="article.id"
        :article="article"
        :needUser="false"
      >
      </Article>
    </van-list>
  </div>
</template>

<script>
import { userCollectionsAPI } from "@/api/userApi";
import Article from "@/components/Community/Article.vue";
import { mapState } from "vuex";
export default {
  components: {
    Article,
  },
  data() {
    return {
      collections: [],
      loading: false,
      finished: false,
      page: 1,
    };
  },
  computed: {
    ...mapState("user", ["tokenInfo", "watchingUser"]),
  },
  methods: {
    async onLoad() {
      const { data: res } = await userCollectionsAPI(
        this.$route.params.id,
        this.page
      );
      this.page++;
      this.collections = [...this.collections, ...res.results];
      this.loading = false;
      if (!res.next) {
        this.finished = true;
        return;
      }
    },
    reset() {
      this.collections = [];
      this.loading = false;
      this.finished = false;
      this.page = 1;
      this.$refs.list.check();
    },
  },
  watch: {
    $route: function () {
      this.reset();
    },
  },
  mounted() {
    this.$refs.list.check();
  },
};
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  margin: 0px 0px;
  padding: 10px 0px;
}
</style>
